{% load i18n iclock_tags static common %}
{% autoescape off %}
    <div id="{{ model_name }}_edit_form" style="padding: 10px; height: 100%; width: 350px">
        <form class="layui-form data-form" action="" method="post">
            {% csrf_token %}
            {% with adminform.form as f %}
                {% if add %}
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label" for="id_area_name">
                            {% trans 'accPrivilege_field_area' %}
                            <span class="required">*</span>
                            </label>
                            <div class="layui-input-inline" >
                                <input readonly class="layui-input" id="id_area_name" name="area_name">
                            </div>
                        </div>
                        <div class="layui-hidden">
                            {% layui_inline f.area %}
                        </div>
                    </div>
                {% else %}
                    {% for fieldset in adminform %}
                        {% for line in fieldset %}
                            {% for field in line %}
                                {% if field.is_readonly %}
                                    <div class="layui-form-item">
                                        <div class="layui-inline{% if field.is_hidden %} layui-hidden {% endif %}
                                            {% if field.name %} field-{{ field.name }}{% endif %}">
                                            <label class="layui-form-label"
                                                   for="id_{{ field.field.field }}">
                                              {{ field.field.label }}
                                              {% if field.field.required %}
                                                <span class="required">*</span>{% endif %}
                                            </label>
                                            <div class="layui-input-inline {% if field.is_hidden %} layui-hidden {% endif %}">
                                                <input type="text" readonly
                                                       name="{{ field.field.field }}"
                                                       lay-verify="{{ field.field.field }}"
                                                       id="id_{{ field.field.field }}"
                                                       class="layui-input" maxlength="20"
                                                       value="{{ field.contents }}">
                                            </div>
                                        </div>
                                    </div>
                                {% endif %}
                            {% endfor %}
                        {% endfor %}
                    {% endfor %}
                {% endif %}
                <div class="layui-form-item">
                    {% layui_inline f.holiday %}
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                            <label class="layui-form-label" for="id_holiday_start">
                            {% trans 'holiday_field_startDate' %}
                            <span class="required">*</span>
                            </label>
                            <div class="layui-input-inline" >
                                <input readonly class="layui-input" id="id_holiday_start" name="holiday_start">
                            </div>
                        </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                            <label class="layui-form-label" for="id_holiday_duration">
                            {% trans 'holiday_field_duration' %}
                            <span class="required">*</span>
                            </label>
                            <div class="layui-input-inline" >
                                <input readonly class="layui-input" id="id_holiday_duration" name="holiday_duration">
                            </div>
                        </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label" for="id_timezone_1">
                            {% trans 'accHoliday_field_timezone' %}
                            <span class="required">*</span>
                        </label>
                        <div class="layui-input-inline" >
                            <select id="id_timezone_1" name="timezone_1" lay-filter="timezone1_select"></select>
                        </div>
                    </div>
                </div>

                <div class="layui-hidden">
                    {% layui_inline f.timezone %}
                    {% layui_inline f.current_area %}
                </div>
            {% endwith %}
        </form>
    </div>
    <script>
        layui.use(['element', 'layer', 'laydate', 'form'], function () {
            var element = layui.element, laydate = layui.laydate, form = layui.form;

            function get_holiday(holiday_id)
            {
                $.ajax({
                    url: "/att/api/holidays/" + holiday_id + "/"
                    , type: "GET"
                    , dataType: "json"
                    , success: function (holiday) {
                        $("#id_holiday_start").val(holiday.start_date);
                        $("#id_holiday_duration").val(holiday.duration_day);
                    }
                    , error: function (XMLHttpRequest, textStatus, errorThrown) {
                        console.trace(arguments);
                        form.render();
                    }
                });
            }

            function get_area_timezone(area_id)
            {
                $.ajax({
                    url: "/acc/api/acctimezones/?area="+area_id
                    , type: "GET"
                    , dataType: "json"
                    , success: function (response) {
                        var data = response.data;
                        var html1 = "";
                        var timezone_id = $("#id_timezone").val();
                        for (var i = 0; i < data.length; i++) {
                            html1 += '<option value="' + data[i]['id'] +'"' + (data[i]['id'].toString()===timezone_id ? 'selected':'')+'>'+ data[i]['timezone_name'] + '</option>';
                        }
                        $("#id_timezone_1").append(html1);
                        form.render('select');

                        $("#id_timezone").val($("#id_timezone_1").val());
                    }
                    , error: function (XMLHttpRequest, textStatus, errorThrown) {
                        console.trace(arguments);
                        form.render();
                    }
                });
            }

            get_area_timezone($("#id_current_area").val());

            element.render();
            form.render();

            form.on('select(timezone1_select)', function (data) {
                $("#id_timezone").val(data.value);
            });

            $("#id_area_name").val($(".related-widget-wrapper .layui-input").val());

            $("#id_holiday").attr("lay-filter","select_holiday");
            form.render('select');

            form.on('select(select_holiday)', function (data) {
                get_holiday(data.value);
            });

            var holiday_id = $("#id_holiday").val();
            if (holiday_id != "") {
                get_holiday($("#id_holiday").val());
            }
        });

    </script>
{% endautoescape %}